/**
* @Description: 活动规则 -- 修改
* @author  tangbin
* @date 2023/3/20
*/
<template>
  <div class="mh100">
    <div class="page-container" style="overflow: scroll;" v-loading="pageLoading">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <div class="split-content-info" id="ruleTop">
          <!-- 标题 -->
          <div class="split-content-title clearfix">
            <div class="split-title">
              <span style="display:inline-block; background-color: #1890FF;margin-bottom: -2px; margin-right: 8px; width: 3px; height: 14px"></span>
              <span style="display: inline-block; color: #333333; font-size: 16px;">基本信息</span>
            </div>
          </div>
          <div>
            <el-row>
              <el-col :span="8">
                <el-form-item label="限制类型" prop="limitType">
                  <el-select v-model="form.limitType" placeholder="请选择" style="width:100%" clearable>
                    <el-option
                      v-for="item in dict.type.basic_data_limint_type"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="限制次数" prop="limitNum">
                  <el-input
                    placeholder="请输入"
                    v-model="form.limitNum"
                    clearable
                    maxlength="9"
                    size="small"
                    oninput="this.value= this.value.match(/\d+/) ? this.value.match(/\d+/)[0] : '';"
                    @blur="scope.row.limitNum=$event.target.value"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="状态" prop="status">
                  <el-select v-model="form.status" placeholder="请选择" size="small" clearable style="width:100%">
                    <el-option
                      v-for="item in dict.type.order_class_status"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"/>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="备注">
                  <el-input v-model="form.remark" :autosize="{ minRows: 3, maxRows: 12}" type="textarea" placeholder="请输入内容" maxlength="500" show-word-limit></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>

        <!-- 模块分割线 -->
        <div class="split-line"></div>
        <!-- 模块分割线 -->

        <!-- :style="{height: height + 'px', minHeight: 200 + 'px'}" -->
        <div class="split-content-info" :style="{height: height + 'px', minHeight: 130 + 'px'}">
          <div class="split-content-title clearfix">
            <div class="split-title">
              <span style="display:inline-block; background-color: #1890FF;margin-bottom: -2px; margin-right: 8px; width: 3px; height: 14px"></span>
              <span style="display: inline-block; color: #333333; font-size: 16px;">选择客户分类</span>
            </div>
          </div>

          <div style="padding-left: 20px; padding-right: 20px; margin-bottom: 30px;">
            <el-radio-group v-model="form.customerType">
              <el-radio v-for="item in dict.type.basic_data_customer_type" :label="item.value">{{ item.label }}</el-radio>
              </el-radio-group>
          </div>
        </div>

      </el-form>

      <div class="h84_line"></div>
      <div class="bottom-btn">
        <div class="bottom-locate" >
          <el-button type="default" @click="cancel">取消</el-button>
          <el-button type="primary" :loading="saveloading" @click="save">确认</el-button>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import {activityRuleEdit, activityRuleDetail} from '@/api/basic/activityRule.js'
import {getTimeSeconds} from '@/utils/index.js'

export default {
  name: 'ActivityRuleEdit',
  dicts: ['order_class_status', 'basic_data_customer_type', 'basic_data_limint_type'],
  data() {
    return {
      mountedTime: undefined, // mounted时间
      activatedTime: undefined, // activated时间
      pageLoading: false, // 页面加载
      height: 130,
      ruleId: this.$route.query.ruleId,
      open: false, // 是否显示弹窗
      saveloading: false,
      form: {
        limitType: undefined, // 限制类型
        limitNum: undefined, // 限制次数
        status: undefined, // 状态
        remark: undefined, // 备注
        customerType: undefined, // 客户分类
      },
      rules: {},
    }
  },
  created() {
    this.setupRules();
  },
  mounted() {
    this.mountedTime = new Date();
    this.ruleId = this.$route.query.ruleId;
    this.getActivityRuleDetail();
    // console.log('mounted');
  },
  activated() {
    // console.log('ruleId=', this.ruleId);
    // console.log('newid =', this.$route.query.ruleId);
    let isNew = false; // 默认不是新的
    if (this.ruleId !== this.$route.query.ruleId) {
      isNew = true; // 新的
    }
    this.ruleId = this.$route.query.ruleId;
    this.activatedTime = new Date();
    // 得到秒数
    let seconds = getTimeSeconds(this.mountedTime, this.activatedTime);
    if (seconds >= 1 && isNew == true) {
      this.getActivityRuleDetail();
      // console.log('activated');
    }
    this.tableHeight();
  },
  updated() {
    // 解决表格设置固定高度导致列设置fixed后重新进来会错行问题
    this.tableHeight();
    // this.$nextTick(() => {
    //   this.$refs.filterTable.doLayout();
    // });
  },
  methods: {

    tableHeight() {
      this.$nextTick(() => {
        let height = document.body.clientHeight - 90 - 40;
        // 查询表单高度
        let s_height = document.getElementById('ruleTop').clientHeight;
        // 按钮容器高度
        // let btns_height = document.getElementById('comTabel').clientHeight;
        // 计算表格的高度
        this.height = height - s_height - 20 - 64;
      });
    },

    setupRules() {
      this.rules = {
        limitNum: [
          {required: true, message: "请输入限制次数", trigger: "blur"}
        ]
        
      };
    },

    /**
     * 获取活动规则详情
     */
    getActivityRuleDetail() {
      if (this.ruleId == undefined) {
        return;
      }
      this.pageLoading = true;
      activityRuleDetail({id: this.ruleId}).then(res => {
        // console.log('res=', res);
        if (res.code === 200) {
          this.form = {...res.data};
          this.pageLoading = false;
        }
      }).catch(err => {

      });
    },
    
    /**
     * 取消
     */
    cancel() {
      const obj = { path: "/basicData/activityRule" };
      this.$tab.closeOpenPage(obj);
    },

    save() {
      this.saveloading = true;
      this.$refs['form'].validate(valid => {
        if (!valid) {
          this.saveloading = false;
          return;
        }
        activityRuleEdit(this.form).then(res => {
          if (res.code == 200) {
            this.$modal.msgSuccess("修改成功");
            this.cancel();
          }
          this.saveloading = false;
        }).catch(err => {
          this.saveloading = false;
        });
      });
    }
  },
}
</script>
